<template>
  <div>
    <div class="sec-01__content_box" flex="main:justify" @click="jump(value.id)" v-for=" value in page ">
      <div class="sec-01__content_img">
        <img :src="value.img" alt="">
      </div>
      <div class="sec-01__content_title" flex="dir:top main:justify">
        <p class="p1">{{value.article.title | myCurrency}}</p>
        <p class="p2">{{value.article.timer}}</p>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {}
    },
    props: {
      page: {
        article: Object,
        img: {
          type: String,
          require: true
        },
        id: Number
      }
    },
    mounted: function () {

    },
    components: {},
    methods: {
      jump: function (id) {
        this.$router.push({path:"/detail",query:{id:id}});
      }
    },
    filters:{
      myCurrency:function(myTxt){
        let string = `${myTxt.slice(0,20)}...`;
        return string;
      }
    }
  }
</script>
<style scoped lang="scss">
  .sec-01__content_box {
    width: 680px;
    margin: 47px auto;
    .sec-01__content_img {
      width: 258px;
      height: 171px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .sec-01__content_title {
      width: calc(151 / 290 * 100%);
      .p1 {
        font-size: 29px;
        padding: 1.5% 0;
        line-height: 40px;
      }
      .p2 {
        font-size: 21px;
        padding-bottom: 7%;
      }
    }
  }
</style>
